<style scoped>
.mainContainer{
	width: 100%;
	overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url(../assets/images/login_bg.jpg);
    background-size: cover;
}
.login-box{
 height: 100%;
}
.logo-center{
	text-align: center;
}
</style>
<template>
  <div class="mainContainer">
    <el-row :gutter="20" type="flex" justify="center" align="middle" class="login-box">
            <!-- <el-col :xs="{span: 12, offset: 6}" :sm="{span: 10, offset: 7}" :md="{span: 8, offset: 8}"> -->
            <el-col :xs="12" :sm="6"  :span="6" >
                <el-card>
                    <p class="logo-center"><img src="../assets/images/logo_name.png"></p>
                    <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
                        <el-form-item prop="username">
                            <el-input readonly v-model.trim="loginForm.username" @keydown.enter.native="submitForm('loginForm')" placeholder="工号">
                                <template slot="prepend"><i class="fa fa-user"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" v-model="loginForm.password" @keydown.enter.native="submitForm('loginForm')" auto-complete="off" placeholder="密码">
                                <template slot="prepend"><i class="fa fa-lock"></i></template>
                            </el-input>
                        </el-form-item>
												<!--
                        <el-form-item prop="verificationCode">
                            <el-input v-model.trim="loginForm.verificationCode" @keydown.enter.native="submitForm('loginForm')" auto-complete="off" placeholder="验证码">
                                <template slot="prepend"><i class="fa fa-unlock-alt"></i></template>
                                <template slot="append">
                                    <img :src="captchaUrl" @click="getCaptchaUrl()">
                                </template>
                            </el-input>
                        </el-form-item>
												-->
                        <el-form-item prop="remember">
                            <el-row>
																	<el-button
																			type="primary"
																			icon="fa-sign-in"
																			:loading="buttonLoading"
																			@click="submitForm('loginForm')"
																			class="form-button wid-max">登录</el-button>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
  </div>
</template>

<script>
import api from '../api'
import { baseURL} from '../api/config'
export default {
  name: 'login',
  data () {
    return {
        loginForm: {
            username: 'superadmin',
            password: '',
            verificationCode: '',
            remember: false
        },
        loginRules: {
		    username: [
		        { required: true, message: '请输入工号', trigger: 'blur' }
		    ],
		    password: [
		        { required: true, message: '请输入密码', trigger: 'blur' }
		    ],
		    verificationCode: [
		        { required: true, message: '请输入验证码', trigger: 'blur' }
		    ]
		},
		buttonLoading: false
    }
  },
  methods: {
		submitForm(){ //登录
			api.login(this.loginForm).then((res)=>{
				if(res.data.code=="LOGINSUCC00001"){
          this.$message({
            message: res.data.info,
            type: 'success'
          });
					if(process.env.NODE_ENV=="development"){
						window.location.href='/';
					}else if(process.env.NODE_ENV=="production"){
						window.location.href=baseURL+'/static/index.html';
					}
				}else{
          this.$message({
            message: res.data.info,
            type: 'error'
          });
				}
			})
			.catch((err)=>{
				console.log(err);
			})
		},
		getCaptchaUrl(){} //获取验证码
	}
}
</script>


